<template>
    <div class="conservePlanDetail" v-if="detailForm">
      <el-row>
        <el-col :span="11">
          <h4>养护计划</h4>
          <div class="title">
            <p>已过周期<span class="orange">{{detailForm.haveExpired}}</span></p>
            <p>完成周期<span class="orange">{{detailForm.realityacComplish}}</span></p>
            <p>完成率<span class="orange">{{detailForm.percentage}}</span></p>
            <p>总维护费用<span class="orange">{{detailForm.maintenance}}</span></p>
          </div>
          <table border="1" rules="all" class="table">
            <tr>
              <td>计划编号</td>
              <td>{{detailForm.planCoder}}</td>
              <td>计划名称</td>
              <td>{{detailForm.planName}}</td>
            </tr>
            <tr>
              <td>是否启用</td>
              <td>
                <template v-if="detailForm.isStart==1">是</template>
                <template v-if="detailForm.isStart==2">否</template>
              </td>
              <td>责任人</td>
              <td>{{detailForm.chargeUserName}}</td>
            </tr>
            <tr>
              <td>设备名称</td>
              <td>{{detailForm.deviceName}}</td>
              <td>设备编号</td>
              <td>{{detailForm.deviceCoder}}</td>
            </tr>
            <tr>
              <td>养护类型</td>
              <td>{{detailForm.conserveTypeName}}</td>
              <td>养护周期</td>
              <td>
                {{detailForm.circleCycle}}
                <span v-show="detailForm.circleUnit==1">天</span>
                <span v-show="detailForm.circleUnit==2">周</span>
                <span v-show="detailForm.circleUnit==3">月</span>
              </td>
            </tr>
            <tr>
              <td>开始时间</td>
              <td>{{detailForm.startDate}}</td>
              <td>结束时间</td>
              <td>{{detailForm.endDate}}</td>
            </tr>
            <!-- <tr>
              <el-tooltip class="item" effect="dark" content="如果当前时间段未设置人员则分派给计划责任人" placement="bottom-start">
                <td>是否关联班组<span class="red"><i class="el-icon-warning-outline" /></span></td>
              </el-tooltip>
              <td colspan="3">
                <template v-if="detailForm.enablePlan==1">是</template>
                <template v-if="detailForm.enablePlan==2">否</template>
              </td>
            </tr> -->
            <tr class="height">
              <td>养护说明</td>
              <td colspan="3">
                {{detailForm.conserveExplain}}
              </td>
            </tr>
          </table>
          <h4>养护任务<el-checkbox v-model="taskStatus">显示未完成任务</el-checkbox></h4>
          <el-table v-loading="taskLoading" :data="detailForm.conservetaskList" border>
            <el-table-column align="center" type="index" label="序号" width="55"/>
            <el-table-column label="任务单号" prop="taskcoder" width="150">
              <template slot-scope="scope">
                <div style="color: #2196F3;"  @click="gettask(scope.row)">{{scope.row.taskcoder}}</div>
              </template>
            </el-table-column>
            <el-table-column label="执行人" prop="chargeuser"/>
            <el-table-column label="执行情况" prop="taskstatus"/>
            <el-table-column label="养护费用" prop="consercost"/>
            <el-table-column label="执行时间" prop="executedate"/>
          </el-table>
          <!-- <pagination
            :total="taskTotal"
            :page.sync="taskForm.pageNum"
            :limit.sync="taskForm.pageSize"
            @pagination="getTaskList"
          /> -->
        </el-col>
        <el-col :span="13">
          <h4>养护情况</h4>
          <table border="1" rules="all" class="table table1">
            <tr>
              <td>养护时间</td>
              <td>{{data.executeDate}}</td>
              <td>养护人</td>
              <td>{{data.chargeUserName}}</td>
              <td>养护总费用</td>
              <td>{{data.conserCost}}</td>
            </tr>
            <tr class="height">
              <td>养护描述</td>
              <td colspan="5">{{data.conseDescribe}}</td>
            </tr>
            <!-- <tr class="height">
              <td>相关附件</td>
              <td colspan="5">{{data}}</td>
            </tr> -->
          </table>
          <h4>养护费用</h4>
          <table border="1" rules="all" class="table">
            <tr>
              <td>名称</td>
              <td>数量</td>
              <td>单价</td>
              <td>小计</td>
            </tr>
            <tr v-for="i in data.deviceMaintainrcostList">
              <td>{{i.name}}</td>
              <td>{{i.number}}</td>
              <td>{{i.price}}</td>
              <td>{{i.subtotal}}</td>
            </tr>
            <tr>
              <td colspan="4" class="right">总计：0.00</td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="btn">
          <el-button type="primary">提交</el-button>
        </el-col>
      </el-row>

    </div>
</template>

<script>
    import {conserveplanDes,conservetaskInfo} from '@/api/curing/index'
    export default {
      name: "conservePlanDetail.vue",
      data() {
        return {
          detailForm: null,
          taskStatus:false,
          taskLoading:false,
          taskList:[],
          taskTotal:0,
          taskForm:{
            pageNum:1,
            pageSize:10,
          },
          data:{}
        }
      },
      created() {
        this.getData()
      },
      methods:{
        getData(){
          conserveplanDes({
            conserveplanId:this.$route.query.id,
            taskStatus:2
            }).then((res)=>{
            if(res.code==200){
              this.detailForm=res.data
            }
          })
        },
        gettask(row){
          conservetaskInfo(row.id).then((res)=>{
            this.data=res.data
          })
          
        },
        getTaskList(){

        }
      }
    }
</script>

<style scoped lang="scss">
  .conservePlanDetail{
    margin-left:10px;
    .btn{
      text-align: center;
    }
    h4 {
      color: #05A380;
      .el-checkbox{
        padding-left:10px;
        color:#05A380;
      }
    }
    .title{
      width:100%;
      overflow:hidden;
      p{
        width:25%;
        float:left;
        text-align: left;
        padding: 0 !important;
        margin:0 0 20px 0 !important;
        font-size: 14px;
        .orange{
          padding-left:5px;
          color: orange;
        }
      }
    }
    .el-table,.pagination-container{
      width: 95%;
    }
    .table{
      border: 1px solid #cccccc;
      color: #606266;
      font-size: inherit;
      width:95%;
      .height{
        height:120px;
      }
      tr {
        td:nth-child(2n-1) {
          width: 20%;
          text-align: center;
        }
        td:nth-child(2n) {
          width: 30%;
          padding-left: 10px;
        }
        td {
          line-height: 35px;
          .red{
            color: red;
          }
        }
        .right{
          text-align: right !important;
          padding-right:10px;
        }
      }
    }
    .table1{

      tr {
        td:nth-child(2n-1) {
          width: 12%;
          text-align: center;
        }

        td:nth-child(2n) {
          width: 21%;
          padding-left: 10px;
        }
      }
    }
  }

</style>
